@import '../../../css/colorVar.less';
:global{
  ul,ol,li{
      list-style: none;
  }
}
.time_box{
    width: 96%;
    height: 100%;
    margin: 0 auto!important;
}
.time_line{
    width: 100%;
    position: relative;
    top: 70px;
    height: 8px;
    background:@first_level_title_auxiliary;
}

.time_horizontal {
    list-style-type: none;
    padding: 0;
    margin:0;
}

.time_horizontal li {
    float: left;
    position: relative;
    text-align: center;
    padding-top: 18px;
}
.time_horizontal li >span{
    position: absolute;
    top: -44px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: max-content;
    height: 35px;
    padding: 4px 10px 10px 10px;
    z-index: 99;
}
.grayDate{
    background: url('../../../assets/comps/other/MilepostC/gray.png') no-repeat;
    background-size:100% 100%;
}
.blueDate {
  background: url('../../../assets/comps/other/MilepostC/blue.png') no-repeat;
  background-size:100% 100%;
}
.yellowDate{
    background: url('../../../assets/comps/other/MilepostC/yellow.png') no-repeat;
    background-size:100% 100%;

}
.time_horizontal li >img{
    position: absolute;
    top: -43px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.time_horizontal li b:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #F4D131;
    transform: translateX(-50%);
    z-index: 99;
}
.order_item{
    position: absolute;
    bottom: 0px;
    z-index: 2;
    text-align: center;
    font-size: 14px;
    padding-bottom: 24px!important;
    width: 78px;
    img{
        position: absolute;
        left: 9px;
        top: -6px;
        z-index: -1;
    }
}
.order_item:after{
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: -1px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #F4D131;
}
.filling_line{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: @theme;
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
    }

.order_item1{
    position: absolute;
    bottom:  -28px;;
    z-index: 2;
    text-align: center;
    font-size: 14px;
    width: 78px;
    }
  // 进度条的
  .time_horizontal_p {
    list-style-type: none;
    padding: 0;
    margin:0;
  }

  .time_horizontal_p li {
    float: left;
    position: relative;
    text-align: center;
    padding-top: 18px;
  }
  .time_horizontal_p li >span{
    position: absolute;
    top: -44px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: max-content;
    height: 35px;
    padding: 4px 10px 10px 10px;
    z-index: 99;
  }
  .time_horizontal_p li >img{
    position: absolute;
    top: -43px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .time_horizontal_p li b:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: @theme;
    transform: translateX(-50%);
    z-index: 99;
  }
  .time_horizontal_p li b:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translateX(-50%);
    z-index: 98;
  }
  .filling_line_p{
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: @theme;
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
  }
  .time_line_p {
    width: 100%;
    position: relative;
    top: 70px;
    height: 8px;
    background:@first_level_title_auxiliary;
    border-radius: 4px;
  }

